<template>
  <el-table-column :="attrs">
    <template #default="{ row }">
      <div class="custom-total-list">
        <div class="custom-total-cell">
          <div class="custom-total-cell-label">店铺底薪：</div>
          <div class="custom-total-cell-value">
            {{ row.customBaseSalary }}
          </div>
        </div>

        <div class="custom-total-cell">
          <div class="custom-total-cell-label">日均接待量：</div>
          <div class="custom-total-cell-value">
            {{ row.customDayReceptionVolume }}
          </div>
        </div>

        <div class="custom-total-cell">
          <div class="custom-total-cell-label">提成效益：</div>
          <div class="custom-total-cell-value">
            {{ row.customCommissionSalary }}
          </div>
        </div>

        <div class="custom-total-cell">
          <div class="custom-total-cell-label">月效益预估：</div>
          <div class="custom-total-cell-value">
            {{ row.customMonthSalary }}
          </div>
        </div>

        <div class="custom-total-cell">
          <div class="custom-total-cell-label">效益合计：</div>
          <div class="custom-total-cell-value">
            {{ row.customSumSalary }}
          </div>
        </div>
      </div>
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>

<style lang="scss" scoped>
.custom-total {
  &-list {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
  }
  &-cell {
    display: inline-flex;
    width: 50%;
  }
  
  // &-label {
    
  // }
}
</style>
